<template>
<div>
  <v-container class="mb-8">
    <base-subheading><span class="subheadspan" @click="$router.push('/says')">我们说~~</span>
      <v-btn color="green" @click="isShowSayForm = true">
        点击来一说
      </v-btn>
    </base-subheading>
      <div v-for="(item,i) in says" :key="i">
        <v-row>
          <v-col md="4">
            <a :href="'says/'+item._id">
              <h3>{{item.title}}</h3>
            </a>
          </v-col>
          <v-spacer />
        </v-row>
        <h5 class="mb-4">{{item.subTitle}}</h5>
      </div>
  </v-container>
  <say-dlg
    :isShowSayForm="isShowSayForm"
    @changSayShow="toggleSayDlg($event)"
    @updateSay="fetch($event)"
  ></say-dlg>

</div>
</template>

<script>
  export default {
    name: 'HomeAbout',

    components: {
      SayDlg: () => import('@/components/say/SayDlg'),
    },

    data() {
      return {
        isShowSayForm: false,
        says: []
      }
    },

    created(){
      this.fetch()
    },

    methods:{
      toggleSayDlg(msg) {
        this.isShowSayForm = msg
      },
      async fetch() {
        const {data: res} = await this.$axios.$get('says', {
          params: {
            query: {"where":{"type": true}, "populate":"user"}
          }
        })
        this.says = res.slice(-5)
      },
      // update(data){
      //   this.says.push(data)
      // }
    }
  }
</script>

<style scoped>
.subheadspan:hover{
  color: red;
  cursor:pointer;
}
</style>
